<div class="ui-jqgrid">
	<div id="grid-pager"
		class="ui-state-default ui-jqgrid-pager ui-corner-bottom" dir="ltr">
		<div id="pg_grid-pager" class="ui-pager-control" role="group">
			<table cellspacing="0" cellpadding="0" border="0" class="ui-pg-table"
				style="width: 100%; table-layout: fixed; height: 100%;" role="row">
				<tbody>
				
					<tr>
						<td id="grid-pager_left" align="left"></td>
						<td id="grid-pager_center" align="center"
							style="white-space: pre; width: 343px;"><table
								cellspacing="0" cellpadding="0" border="0"
								style="table-layout: auto;" class="ui-pg-table">
								<tbody>
									<tr>
										<td id="first_grid-pager" onclick="showPage(1,this)"
											class="ui-pg-button ui-corner-all <#if page.isFirstPage>ui-state-disabled</#if>"
											style="cursor: pointer;"><span
											class="ui-icon ace-icon fa fa-angle-double-left bigger-140"></span></td>
										<td id="prev_grid-pager" onclick="showPage(${page.prePage!},this)"
											class="ui-pg-button ui-corner-all <#if page.isFirstPage>ui-state-disabled</#if>"
											style="cursor: pointer;"><span
											class="ui-icon ace-icon fa fa-angle-left bigger-140"></span></td>
										<td dir="ltr">Page <input class="ui-pg-input" id="ui-pg-input" type="text"
											size="2" maxlength="7" value="${page.pageNum!}" role="textbox"> of <span
											id="sp_1_grid-pager">${page.pages!}</span></td>
										<td id="next_grid-pager" onclick="showPage(${page.nextPage!},this)" class="ui-pg-button ui-corner-all <#if page.isLastPage>ui-state-disabled</#if>"
											style="cursor: pointer;"><span
											class="ui-icon ace-icon fa fa-angle-right bigger-140"></span></td>
										<td id="last_grid-pager" onclick="showPage(${page.pages!},this)" class="ui-pg-button ui-corner-all <#if page.isLastPage>ui-state-disabled</#if>"
											style="cursor: pointer;"><span
											class="ui-icon ace-icon fa fa-angle-double-right bigger-140"></span></td>
									</tr>
								</tbody>
							</table></td>
						<td id="grid-pager_right" align="right"><div dir="ltr"
								style="text-align: right" class="ui-paging-info">View ${page.startRow!} -
								${page.endRow!} of ${page.total!}</div></td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</div>
<script type="text/javascript">
/**
 * 翻页到指定页数
 */
var showPage = function(page,obj) {
	var objId = $(obj).attr("id");//当前按钮的id
	var pages = $("#sp_1_grid-pager").html();//总页数
	var pageNum = $(".ui-pg-input").val();//当前页
	if(pageNum == pages && pageNum == 1){
		return;
	}
	if(pageNum == pages){
		if(objId == "next_grid-pager" || objId == "last_grid-pager"){
			return;
		}
	}else if(pageNum == 1){
		if(objId == "prev_grid-pager" || objId == "first_grid-pager"){
			return;
		}
	} 
	$("td").attr("onclick","");
	var action = $("#searchForm").attr("action");
	action = action + "?page=" + page;
	$("#searchForm").attr("action", action);
	$("#searchForm").submit();
}

$("#ui-pg-input").blur(function(){
	var objValue = $("#ui-pg-input").val();//文本框输入页数
	var pages = $("#sp_1_grid-pager").html();//总页数
	if(Number(objValue) > pages || Number(objValue) < 1){
		return;
	}
	$("td").attr("onclick","");
	var action = $("#searchForm").attr("action");
	action = action + "?page=" + objValue;
	$("#searchForm").attr("action", action);
	$("#searchForm").submit();
}); 
</script>